<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
    <title>快速认识JavaScript插件</title>
    <!--    Bootstrap核心css文件-->
    <link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/css/bootstrap.min.css">

</head>
<body class="container">
<ul class="nav nav-tabs">
    <li class="nav-item">
        <a href="#image1" class="nav-link active" data-toggle="tab">图片1</a>
    </li>
    <li class="nav-item">
        <a href="#image2" class="nav-link" data-toggle="tab">图片2</a>
    </li>
    <li class="nav-item">
        <a href="#image3" class="nav-link" data-toggle="tab">图片3</a>
    </li>
    <li class="dropdown nav-item">
        <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">更多内容</a>
        <ul class="dropdown-menu">
            <li class="nav-item">
                <a href="#image4" class="nav-link" data-toggle="tab">图片4</a>
            </li>
            <li class="nav-item">
                <a href="#image5" class="nav-link" data-toggle="tab">图片5</a>
            </li>
        </ul>
    </li>
</ul>
<div class="tab-content">
    <div class="tab-pane fade show active" id="image1">
        <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1592749924880&di=19fd00107dc5c64270ef73dfd76b4ec8&imgtype=0&src=http%3A%2F%2Fimg4.imgtn.bdimg.com%2Fit%2Fu%3D1395559124%2C844098142%26fm%3D214%26gp%3D0.jpg" class="img-fluid" alt="">
    </div>
    <div class="tab-pane fade" id="image2">
        <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1592749924370&di=1da7874065e4d65389ccd0ff1a713640&imgtype=0&src=http%3A%2F%2Fpic1.win4000.com%2Fpic%2Ff%2F06%2Fa8fb69593e.jpg" class="img-fluid" alt="">
    </div>
    <div class="tab-pane fade" id="image3">
        <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1592749924370&di=8281d924f58a1427d0c2a2f0d7c3fa2e&imgtype=0&src=http%3A%2F%2Fimage.namedq.com%2Fuploads%2F20180910%2F14%2F1536559984-tVZOCYoUAs.jpg" class="img-fluid" alt="">
    </div>
    <div class="tab-pane fade" id="image4">
        <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1592749924370&di=d0aafa1bf9b2173ebf22306121eb42a0&imgtype=0&src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F201705%2F08%2F20170508080655_NfQWE.jpeg" class="img-fluid" alt="">
    </div>
    <div class="tab-pane fade" id="image5">
        <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1592749992877&di=0a4b48f7019defdfd40ef1f651d5cae8&imgtype=0&src=http%3A%2F%2Fimg1.imgtn.bdimg.com%2Fit%2Fu%3D2899500456%2C1238079701%26fm%3D214%26gp%3D0.jpg" class="img-fluid" alt="">
    </div>
</div>
<!--引入js文件-->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<!--Bootstrap核心JavaScript文件-->
<script src="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/js/bootstrap.min.js"></script>
</body>
</html>